<template>
    <div class="question-selector-container">
        <el-select :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)">
            <el-option v-for="item in difficultyList" :key="item.difficulty" :label="item.difficultyName" :value="item.difficulty" />
        </el-select>
    </div>
</template>
<script setup>
import { reactive } from 'vue'

const props = defineProps({
    modelValue: {
        type: [String, Number],
        default: ''
    }
})

defineEmits(['update:modelValue'])

const difficultyList = reactive([
    {
        "difficulty": 0,
        "difficultyName": "简单",
    },
    {
        "difficulty": 1,
        "difficultyName": "中等",
    },
    {
        "difficulty": 2,
        "difficultyName": "困难",
    }
]) 
</script>

<style scoped>
.question-selector-container {
    position: relative;
}
</style>